<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件管理器</title>
    <link rel="stylesheet" href="https://unpkg.com/layui@2.8.18/dist/css/layui.css">
    <style>
        .file-manager {
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        .file-toolbar {
            padding: 10px;
            border-bottom: 1px solid #e6e6e6;
            background: #f8f8f8;
        }
        
        .file-content {
            flex: 1;
            display: flex;
            min-height: 0;
        }
        
        .file-tree {
            width: 250px;
            border-right: 1px solid #e6e6e6;
            overflow-y: auto;
        }
        
        .file-main {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .file-header {
            padding: 10px;
            border-bottom: 1px solid #e6e6e6;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .file-list {
            flex: 1;
            overflow: auto;
        }
        
        .file-preview {
            height: 300px;
            border-top: 1px solid #e6e6e6;
            padding: 10px;
            overflow: auto;
            background: #f9f9f9;
        }
        
        .breadcrumb {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .breadcrumb-item {
            cursor: pointer;
            color: #1e9fff;
        }
        
        .breadcrumb-item:hover {
            text-decoration: underline;
        }
        
        .file-item {
            display: flex;
            align-items: center;
            padding: 8px 10px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .file-item:hover {
            background-color: #f5f5f5;
        }
        
        .file-item.selected {
            background-color: #e6f7ff;
        }
        
        .file-icon {
            margin-right: 8px;
            font-size: 16px;
        }
        
        .file-info {
            flex: 1;
            display: flex;
            justify-content: space-between;
        }
        
        .context-menu {
            position: absolute;
            background: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            z-index: 9999;
            min-width: 120px;
        }
        
        .context-menu-item {
            padding: 8px 15px;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .context-menu-item:hover {
            background-color: #f5f5f5;
        }
        
        .drawer {
            position: fixed;
            top: 0;
            left: -300px;
            width: 300px;
            height: 100vh;
            background: white;
            border-right: 1px solid #e6e6e6;
            transition: left 0.3s;
            z-index: 1000;
            box-shadow: 2px 0 8px rgba(0,0,0,0.1);
        }
        
        .drawer.open {
            left: 0;
        }
        
        .drawer-header {
            padding: 15px;
            border-bottom: 1px solid #e6e6e6;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .drawer-content {
            padding: 10px;
            height: calc(100vh - 60px);
            overflow-y: auto;
        }
        
        .favorite-item {
            padding: 10px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .favorite-item:hover {
            background-color: #f5f5f5;
        }
        
        .text-editor {
            height: 100%;
        }
        
        .text-editor textarea {
            width: 100%;
            height: 100%;
            border: none;
            resize: none;
            padding: 10px;
            font-family: 'Courier New', monospace;
        }
    </style>
</head>
<body>
    <div class="file-manager">
        <!-- 工具栏 -->
        <div class="file-toolbar">
            <div class="layui-btn-group">
                <button class="layui-btn layui-btn-sm" id="btn-favorites">
                    <i class="layui-icon layui-icon-star-fill"></i> 常用文件夹
                </button>
                <button class="layui-btn layui-btn-sm" id="btn-new-folder">
                    <i class="layui-icon layui-icon-add-1"></i> 新建文件夹
                </button>
                <button class="layui-btn layui-btn-sm" id="btn-new-file">
                    <i class="layui-icon layui-icon-file"></i> 新建文件
                </button>
                <button class="layui-btn layui-btn-sm" id="btn-upload">
                    <i class="layui-icon layui-icon-upload"></i> 上传
                </button>
                <button class="layui-btn layui-btn-sm" id="btn-refresh">
                    <i class="layui-icon layui-icon-refresh-3"></i> 刷新
                </button>
            </div>
        </div>
        
        <!-- 主要内容区域 -->
        <div class="file-content">
            <!-- 左侧文件树 -->
            <div class="file-tree">
                <ul id="tree" class="layui-tree"></ul>
            </div>
            
            <!-- 右侧主要区域 -->
            <div class="file-main">
                <!-- 头部导航 -->
                <div class="file-header">
                    <div class="breadcrumb" id="breadcrumb">
                        <span class="breadcrumb-item" data-path="/">根目录</span>
                    </div>
                    <div class="layui-btn-group">
                        <button class="layui-btn layui-btn-xs" id="btn-list-view">
                            <i class="layui-icon layui-icon-list"></i>
                        </button>
                        <button class="layui-btn layui-btn-xs" id="btn-grid-view">
                            <i class="layui-icon layui-icon-template-1"></i>
                        </button>
                    </div>
                </div>
                
                <!-- 文件列表 -->
                <div class="file-list">
                    <table class="layui-table" lay-skin="line" id="file-table">
                        <thead>
                            <tr>
                                <th>名称</th>
                                <th>大小</th>
                                <th>类型</th>
                                <th>修改时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="file-tbody">
                        </tbody>
                    </table>
                </div>
                
                <!-- 文件预览区域 -->
                <div class="file-preview" id="file-preview" style="display:none;">
                    <div id="preview-content"></div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 常用文件夹抽屉 -->
    <div class="drawer" id="favorites-drawer">
        <div class="drawer-header">
            <h3>常用文件夹</h3>
            <button class="layui-btn layui-btn-xs" id="close-drawer">
                <i class="layui-icon layui-icon-close"></i>
            </button>
        </div>
        <div class="drawer-content">
            <div class="layui-form">
                <div class="layui-input-group">
                    <input type="text" class="layui-input" id="favorite-path" placeholder="输入文件夹路径">
                    <div class="layui-input-split layui-input-suffix">
                        <button class="layui-btn layui-btn-primary layui-btn-sm" id="add-favorite">添加</button>
                    </div>
                </div>
            </div>
            <div id="favorites-list" style="margin-top: 15px;"></div>
        </div>
    </div>
    
    <!-- 右键菜单 -->
    <div class="context-menu" id="context-menu" style="display:none;">
        <div class="context-menu-item" data-action="open">打开</div>
        <div class="context-menu-item" data-action="rename">重命名</div>
        <div class="context-menu-item" data-action="copy">复制</div>
        <div class="context-menu-item" data-action="cut">剪切</div>
        <div class="context-menu-item" data-action="delete">删除</div>
        <div class="context-menu-item" data-action="properties">属性</div>
    </div>

    <script src="https://unpkg.com/layui@2.8.18/dist/layui.js"></script>
    <script>
        layui.use(['tree', 'table', 'layer', 'form', 'upload'], function(){
            var tree = layui.tree;
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;
            var upload = layui.upload;
            
            // 模拟文件数据
            var fileData = {
                '/': {
                    type: 'folder',
                    children: [
                        { name: '文档', type: 'folder', size: '-', date: '2024-01-15 10:30', path: '/文档' },
                        { name: '图片', type: 'folder', size: '-', date: '2024-01-14 16:20', path: '/图片' },
                        { name: 'readme.txt', type: 'file', size: '1.2KB', date: '2024-01-16 09:15', path: '/readme.txt' },
                        { name: 'config.json', type: 'file', size: '856B', date: '2024-01-15 14:22', path: '/config.json' }
                    ]
                },
                '/文档': {
                    type: 'folder',
                    children: [
                        { name: '工作报告.docx', type: 'file', size: '2.5MB', date: '2024-01-15 11:30', path: '/文档/工作报告.docx' },
                        { name: '项目计划.xlsx', type: 'file', size: '1.8MB', date: '2024-01-14 15:45', path: '/文档/项目计划.xlsx' },
                        { name: '备忘录.txt', type: 'file', size: '512B', date: '2024-01-16 08:20', path: '/文档/备忘录.txt' }
                    ]
                },
                '/图片': {
                    type: 'folder',
                    children: [
                        { name: 'photo1.jpg', type: 'file', size: '3.2MB', date: '2024-01-10 12:00', path: '/图片/photo1.jpg' },
                        { name: 'logo.png', type: 'file', size: '45KB', date: '2024-01-12 09:30', path: '/图片/logo.png' }
                    ]
                }
            };
            
            var currentPath = '/';
            var selectedFiles = [];
            var clipboard = { action: '', files: [] };
            var favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
            
            // 初始化界面
            function init() {
                renderTree();
                renderFileList(currentPath);
                renderFavorites();
                bindEvents();
            }
            
            // 渲染文件树
            function renderTree() {
                var treeData = buildTreeData(fileData);
                tree.render({
                    elem: '#tree',
                    data: treeData,
                    click: function(obj) {
                        currentPath = obj.data.path;
                        renderFileList(currentPath);
                        updateBreadcrumb(currentPath);
                    }
                });
            }
            
            // 构建树形数据
            function buildTreeData(data, path = '/') {
                var result = [];
                var current = data[path];
                if (current && current.children) {
                    current.children.forEach(function(item) {
                        if (item.type === 'folder') {
                            result.push({
                                title: item.name,
                                path: item.path,
                                children: buildTreeData(data, item.path)
                            });
                        }
                    });
                }
                return result;
            }
            
            // 渲染文件列表
            function renderFileList(path) {
                var tbody = document.getElementById('file-tbody');
                tbody.innerHTML = '';
                
                var current = fileData[path];
                if (!current || !current.children) return;
                
                current.children.forEach(function(file, index) {
                    var row = document.createElement('tr');
                    row.className = 'file-item';
                    row.dataset.path = file.path;
                    row.dataset.type = file.type;
                    
                    var icon = file.type === 'folder' ? 'layui-icon-folder' : 'layui-icon-file';
                    
                    row.innerHTML = `
                        <td>
                            <i class="layui-icon ${icon} file-icon"></i>
                            <span>${file.name}</span>
                        </td>
                        <td>${file.size}</td>
                        <td>${file.type === 'folder' ? '文件夹' : '文件'}</td>
                        <td>${file.date}</td>
                        <td>
                            <button class="layui-btn layui-btn-xs" onclick="openFile('${file.path}')">打开</button>
                            <button class="layui-btn layui-btn-xs layui-btn-normal" onclick="renameFile('${file.path}')">重命名</button>
                            <button class="layui-btn layui-btn-xs layui-btn-danger" onclick="deleteFile('${file.path}')">删除</button>
                        </td>
                    `;
                    
                    tbody.appendChild(row);
                });
            }
            
            // 更新面包屑导航
            function updateBreadcrumb(path) {
                var breadcrumb = document.getElementById('breadcrumb');
                breadcrumb.innerHTML = '';
                
                var parts = path.split('/').filter(p => p);
                var currentPath = '';
                
                // 根目录
                var root = document.createElement('span');
                root.className = 'breadcrumb-item';
                root.textContent = '根目录';
                root.dataset.path = '/';
                breadcrumb.appendChild(root);
                
                parts.forEach(function(part) {
                    currentPath += '/' + part;
                    
                    var separator = document.createElement('span');
                    separator.textContent = ' > ';
                    breadcrumb.appendChild(separator);
                    
                    var item = document.createElement('span');
                    item.className = 'breadcrumb-item';
                    item.textContent = part;
                    item.dataset.path = currentPath;
                    breadcrumb.appendChild(item);
                });
            }
            
            // 渲染常用文件夹
            function renderFavorites() {
                var list = document.getElementById('favorites-list');
                list.innerHTML = '';
                
                favorites.forEach(function(fav, index) {
                    var item = document.createElement('div');
                    item.className = 'favorite-item';
                    item.innerHTML = `
                        <span onclick="navigateToPath('${fav}')" style="cursor:pointer;">${fav}</span>
                        <i class="layui-icon layui-icon-close" onclick="removeFavorite(${index})" style="cursor:pointer;"></i>
                    `;
                    list.appendChild(item);
                });
            }
            
            // 绑定事件
            function bindEvents() {
                // 常用文件夹抽屉
                document.getElementById('btn-favorites').onclick = function() {
                    document.getElementById('favorites-drawer').classList.add('open');
                };
                
                document.getElementById('close-drawer').onclick = function() {
                    document.getElementById('favorites-drawer').classList.remove('open');
                };
                
                // 添加常用文件夹
                document.getElementById('add-favorite').onclick = function() {
                    var path = document.getElementById('favorite-path').value.trim();
                    if (path && favorites.indexOf(path) === -1) {
                        favorites.push(path);
                        localStorage.setItem('favorites', JSON.stringify(favorites));
                        renderFavorites();
                        document.getElementById('favorite-path').value = '';
                        layer.msg('添加成功');
                    }
                };
                
                // 面包屑导航
                document.getElementById('breadcrumb').addEventListener('click', function(e) {
                    if (e.target.classList.contains('breadcrumb-item')) {
                        var path = e.target.dataset.path;
                        currentPath = path;
                        renderFileList(path);
                        updateBreadcrumb(path);
                    }
                });
                
                // 右键菜单
                document.addEventListener('contextmenu', function(e) {
                    e.preventDefault();
                    showContextMenu(e.pageX, e.pageY);
                });
                
                document.addEventListener('click', function() {
                    hideContextMenu();
                });
                
                // 新建文件夹
                document.getElementById('btn-new-folder').onclick = function() {
                    layer.prompt({title: '新建文件夹', formType: 0}, function(value, index, elem){
                        createFolder(currentPath, value);
                        layer.close(index);
                    });
                };
                
                // 新建文件
                document.getElementById('btn-new-file').onclick = function() {
                    layer.prompt({title: '新建文件', formType: 0}, function(value, index, elem){
                        createFile(currentPath, value);
                        layer.close(index);
                    });
                };
                
                // 刷新
                document.getElementById('btn-refresh').onclick = function() {
                    renderFileList(currentPath);
                    layer.msg('刷新完成');
                };
                
                // 文件双击事件
                document.getElementById('file-tbody').addEventListener('dblclick', function(e) {
                    var row = e.target.closest('.file-item');
                    if (row) {
                        var path = row.dataset.path;
                        var type = row.dataset.type;
                        if (type === 'folder') {
                            currentPath = path;
                            renderFileList(path);
                            updateBreadcrumb(path);
                        } else {
                            previewFile(path);
                        }
                    }
                });
            }
            
            // 显示右键菜单
            function showContextMenu(x, y) {
                var menu = document.getElementById('context-menu');
                menu.style.display = 'block';
                menu.style.left = x + 'px';
                menu.style.top = y + 'px';
            }
            
            // 隐藏右键菜单
            function hideContextMenu() {
                document.getElementById('context-menu').style.display = 'none';
            }
            
            // 全局函数
            window.openFile = function(path) {
                var parts = path.split('/');
                var fileName = parts[parts.length - 1];
                var ext = fileName.split('.').pop().toLowerCase();
                
                if (fileData[path]) {
                    currentPath = path;
                    renderFileList(path);
                    updateBreadcrumb(path);
                } else {
                    if (['txt', 'js', 'css', 'html', 'json', 'md'].includes(ext)) {
                        previewFile(path);
                    } else {
                        layer.msg('此类型文件无法预览');
                    }
                }
            };
            
            window.previewFile = function(path) {
                var preview = document.getElementById('file-preview');
                var content = document.getElementById('preview-content');
                
                var fileName = path.split('/').pop();
                var ext = fileName.split('.').pop().toLowerCase();
                
                if (['txt', 'js', 'css', 'html', 'json', 'md'].includes(ext)) {
                    // 模拟文本内容
                    var mockContent = '这是文件 ' + fileName + ' 的内容。\n\n您可以在这里编辑文本内容。';
                    
                    content.innerHTML = `
                        <div style="margin-bottom: 10px;">
                            <strong>文件预览：${fileName}</strong>
                            <button class="layui-btn layui-btn-xs layui-btn-normal" style="float:right;" onclick="editFile('${path}')">编辑</button>
                        </div>
                        <div class="text-editor">
                            <textarea readonly>${mockContent}</textarea>
                        </div>
                    `;
                    
                    preview.style.display = 'block';
                } else {
                    preview.style.display = 'none';
                    layer.msg('此类型文件无法预览');
                }
            };
            
            window.editFile = function(path) {
                var fileName = path.split('/').pop();
                layer.open({
                    type: 1,
                    title: '编辑文件 - ' + fileName,
                    area: ['80%', '70%'],
                    content: `
                        <div style="padding: 15px;">
                            <textarea id="file-editor" style="width: 100%; height: 400px; border: 1px solid #ddd; padding: 10px; font-family: 'Courier New', monospace;">这是文件 ${fileName} 的内容。\n\n您可以在这里编辑文本内容。</textarea>
                        </div>
                    `,
                    btn: ['保存', '取消'],
                    yes: function(index) {
                        var content = document.getElementById('file-editor').value;
                        // 这里应该保存文件内容到服务器
                        layer.msg('文件保存成功');
                        layer.close(index);
                    }
                });
            };
            
            window.renameFile = function(path) {
                var fileName = path.split('/').pop();
                layer.prompt({title: '重命名', formType: 0, value: fileName}, function(value, index, elem){
                    // 这里应该发送重命名请求到服务器
                    layer.msg('重命名成功');
                    renderFileList(currentPath);
                    layer.close(index);
                });
            };
            
            window.deleteFile = function(path) {
                var fileName = path.split('/').pop();
                layer.confirm('确定要删除 "' + fileName + '" 吗？', function(index){
                    // 这里应该发送删除请求到服务器
                    layer.msg('删除成功');
                    renderFileList(currentPath);
                    layer.close(index);
                });
            };
            
            window.createFolder = function(parentPath, name) {
                // 这里应该发送创建文件夹请求到服务器
                layer.msg('文件夹创建成功');
                renderFileList(currentPath);
            };
            
            window.createFile = function(parentPath, name) {
                // 这里应该发送创建文件请求到服务器
                layer.msg('文件创建成功');
                renderFileList(currentPath);
            };
            
            window.navigateToPath = function(path) {
                currentPath = path;
                renderFileList(path);
                updateBreadcrumb(path);
                document.getElementById('favorites-drawer').classList.remove('open');
            };
            
            window.removeFavorite = function(index) {
                favorites.splice(index, 1);
                localStorage.setItem('favorites', JSON.stringify(favorites));
                renderFavorites();
                layer.msg('移除成功');
            };
            
            // 初始化
            init();
        });
    </script>
</body>
</html>